<template>
  <common-page title="告警配置">
    <el-button
      slot="header"
      @click="save"
      type="primary"
      v-hasPermi="['datascan:alarmstrategy:edit']"
      >保存</el-button
    >
    <div class="alarm-config-wrap" slot="content">
      <common-group-title title="高频访问异常" />
      <el-form label-width="120px" @submit.native.prevent>
        <el-form-item label="状态">
          <el-switch
            v-model="highFrequencyStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="告警等级">
          <el-select
            v-model="form.strategyValue.highFrequencyAlarmLevel"
            style="width: 160px"
          >
            <el-option
              v-for="item in alarmLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select
            v-model="form.strategyValue.highFrequencyDanger"
            style="width: 160px"
          >
            <el-option
              v-for="item in alarmLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="高频访问">
          <div style="display: flex; align-items: center">
            <common-input-number
              v-model="form.strategyValue.highFrequencyTime"
              style="width: 120px"
            />
            <span style="margin: 0 8px">秒内连续访问</span>
            <common-input-number
              v-model="form.strategyValue.highFrequencyCount"
              style="width: 120px"
            />
            <span>次</span>
          </div>
        </el-form-item>
      </el-form>

      <common-group-title title="数据总量访问异常" />
      <el-form label-width="120px" style="width: 300px" @submit.native.prevent>
        <el-form-item label="状态">
          <el-switch
            v-model="dataCountStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="告警等级">
          <el-select
            v-model="form.strategyValue.dataCountAlarmLevel"
            style="width: 160px"
          >
            <el-option
              v-for="item in alarmLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select
            v-model="form.strategyValue.dataCountDanger"
            style="width: 160px"
          >
            <el-option
              v-for="item in alarmLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常阈值">
          <common-input-number
            v-model="form.strategyValue.dataExceptionCount"
          />
        </el-form-item>
      </el-form>

      <common-group-title title="非工作时间访问异常" />
      <el-form label-width="120px" @submit.native.prevent>
        <el-form-item label="状态">
          <el-switch
            v-model="visitStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="告警等级">
          <el-select
            v-model="form.strategyValue.visitTimeAlarmLevel"
            style="width: 160px"
          >
            <el-option
              v-for="item in alarmLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select
            v-model="form.strategyValue.visitTimeDanger"
            style="width: 160px"
          >
            <el-option
              v-for="item in alarmLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作日">
          <el-checkbox-group v-model="dateList">
            <el-checkbox :label="1">周一</el-checkbox>
            <el-checkbox :label="2">周二</el-checkbox>
            <el-checkbox :label="3">周三</el-checkbox>
            <el-checkbox :label="4">周四</el-checkbox>
            <el-checkbox :label="5">周五</el-checkbox>
            <el-checkbox :label="6">周六</el-checkbox>
            <el-checkbox :label="7">周日</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="上午工作时间">
          <el-time-picker
            is-range
            v-model="morning"
            format="HH:mm"
            value-format="HH:mm"
            range-separator="至"
            start-placeholder="上班时间"
            end-placeholder="下班时间"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="下午工作时间">
          <el-time-picker
            is-range
            v-model="after"
            format="HH:mm"
            value-format="HH:mm"
            range-separator="至"
            start-placeholder="上班时间"
            end-placeholder="下班时间"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
    </div>
  </common-page>
</template>

<script>
import {
  alarm_strategy_list,
  alarm_strategy_add,
  alarm_strategy_update,
} from "@/api/alarmConfig";
import BaseList from "@/mixins/BaseList";

export default {
  name: "index",
  mixins: [BaseList],
  data() {
    return {
      dateList: [],
      morning: ["09:00", "11:00"],
      after: ["13:00", "17:00"],
      highFrequencyStatus: false,
      dataCountStatus: false,
      visitStatus: false,
      alarmLevelList: [
        { label: "高", value: 2 },
        { label: "中", value: 1 },
        { label: "低", value: 0 },
      ],
      form: {
        id: null,
        strategyCode: "ALARM_STRATEGY_INTEGERFACE_DANGER",
        strategyValue: {
          highFrequencyTime: 30, //
          highFrequencyCount: 15,
          highFrequencyAlarmLevel: 0,
          highFrequencyDanger: 0,
          highFrequencyStatus: 0,

          dataExceptionCount: 100,
          dataCountAlarmLevel: 0,
          dataCountDanger: 0,
          dataCountStatus: 0,

          visitWeek: "1,2,3,4,5",
          visitMorningStart: "09:00",
          visitMorningEnd: "11:00",
          visitAfternoonStart: "13:00",
          visitAfternoonEnd: "17:00",
          visitTimeAlarmLevel: 0, // 访问告警级别
          visitTimeDanger: 0, // 访问风险级别
          visitStatus: 0, //
        },
      },
    };
  },
  methods: {
    save() {
      this.form.strategyValue.visitMorningStart = this.morning[0];
      this.form.strategyValue.visitMorningEnd = this.morning[1];
      this.form.strategyValue.visitAfternoonStart = this.after[0];
      this.form.strategyValue.visitAfternoonEnd = this.after[1];

      this.form.strategyValue.visitWeek = this.dateList.join(",");

      this.form.strategyValue.highFrequencyStatus = this.highFrequencyStatus
        ? 1
        : 0;
      this.form.strategyValue.dataCountStatus = this.dataCountStatus ? 1 : 0;
      this.form.strategyValue.visitStatus = this.visitStatus ? 1 : 0;

      console.log(this.form);

      if (this.form.id) {
        this.editAlarmStrategy({
          ...this.form,
          strategyValue: JSON.stringify(this.form.strategyValue),
        });
      } else {
        this.addAlarmStrategy({
          ...this.form,
          strategyValue: JSON.stringify(this.form.strategyValue),
        });
      }
    },
    initData() {
      this.morning = [
        this.form.strategyValue.visitMorningStart,
        this.form.strategyValue.visitMorningEnd,
      ];
      this.after = [
        this.form.strategyValue.visitAfternoonStart,
        this.form.strategyValue.visitAfternoonEnd,
      ];

      this.highFrequencyStatus =
        this.form.strategyValue.highFrequencyStatus === 1;
      this.dataCountStatus = this.form.strategyValue.dataCountStatus === 1;
      this.visitStatus = this.form.strategyValue.visitStatus === 1;

      this.dateList = this.form.strategyValue.visitWeek
        .split(",")
        .reduce((r, c) => {
          if (c) {
            let week = Number(c);
            if (week >= 1 && week <= 7) r.push(week);
          }
          return r;
        }, []);
    },
    addAlarmStrategy(params) {
      alarm_strategy_add(params)
        .then((res) => {
          this.$GlobalSuccessMessage("编辑成功");
        })
    },
    editAlarmStrategy(params) {
      alarm_strategy_update(params)
        .then((res) => {
          this.$GlobalSuccessMessage("编辑成功");
        })
    },
    getAlarmStrategyList() {
      alarm_strategy_list()
        .then((res) => {
          if (res && res.code === 200) {
            if (res.rows.length) {
              let { id, strategyCode, strategyValue } = res.rows[0];
              this.form.id = id;
              this.form.strategyCode = strategyCode;

              try {
                let strategyValueObj = JSON.parse(strategyValue);
                Object.keys(this.form.strategyValue).forEach((key) => {
                  if (strategyValueObj.hasOwnProperty(key))
                    this.form.strategyValue[key] = strategyValueObj[key];
                });

                this.initData();
              } catch (e) {
                console.log("---------- JSON转换异常 ----------");
                console.log(strategyValue);
                console.log("---------- JSON转换异常 ----------");
              }
            }
          }else{
            this.handleListTips(res)
          }
        })
    },
  },
  mounted() {
    this.getAlarmStrategyList();
  },
};
</script>

<style scoped lang="scss">
.alarm-config-wrap {
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  height: 100%;
}
</style>
